* {
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

body {
    /* background-image: linear-gradient(to left, gray, white); */
    background-color: white;
    margin: unset;
}
nav{
    display: flex;
    justify-content: space-between;
    background-color: rgb(255, 255, 255);
    width: 100%;
}

.dl {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-right: 80px;
}

.flk {
    display: flex;
    gap: 15px;
    margin-left: 20px;
}

a {
    padding-top: 11px;
    font-size: 13px;
    text-decoration: none;
    color: black;
}

i {
    padding-top: 11px;
    font-size: 12px;
}

h6 {
    font-size: 10px;
    margin-right: 20px;
    margin-top: 10px;
}

h4 {
    color: red;
}

h1 {
    width: 600px;
    font-size: 100px;
    color: rgb(255, 255, 255);
    margin-left: 10px;
    margin-top: 50px;
}

.ok {
    font-size: 30px;
    margin-bottom: -60px;
    margin-left: 10px;
    margin-top: 50px;
}

.bo {
    margin-bottom: -50px;
    margin-left: 10px;
    margin-top: 70px;
}
.head {
    background-image: linear-gradient(to bottom, gray, white);
    border: solid 2px white;
    margin: 0 10px;
    border-radius: 10px;
    position: relative;
}

.lo {
    height: 200px;
    position: absolute;
    top: 40px;
    left: 250px;
    -webkit-box-reflect: below 0px        linear-gradient(to bottom,
     rgba(0, 0, 0, 0),
     rgba(0, 0, 0, 0.1));
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.6));
    }
.wire {
    border-radius: 15%;
    background-color: red;
    color: white;
    border: none;
    width: 100px;
    height: 20px;
    position: absolute;
    bottom: 60px;
    margin-left: 10px;
}
.text {
    float: right;
    margin-top: -80px;
}

.ear{
    position: absolute;
    height: 200px;
    left: 100px;
    top: 0;
}
.ut {
    margin-top: -10;
    font-size: 50px;
    margin-left: 10px;
    color: rgba(240, 248, 255, 0.722);
}
.tu{
    margin-top: 10;
    font-size: 35px;
    margin-left: 10px;
    color: rgb(240, 248, 255);
    position: absolute;
    bottom: 42px;
}
#gt {
    position: absolute;
    bottom: 80px;
    font-size: 30px;
    margin-left: 10px;
}
#ot {
    font-size: small;
    margin-left: 10px;
}
#butw{
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 10px;
    color: rgb(238, 255, 0);
    position: absolute;
    bottom: 50px;
    margin-left: 10px;
}
#but {
    background-color: red;
    border: none;
    border-radius: 10px;
    color: aliceblue;
    position: absolute;
    bottom: 50px;
    margin-left: 10px;
}
#red {
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 10%;
    color: rgb(255, 0, 0);
    position: absolute;
    bottom: 50px;
    margin-left: 10px;
}
.lap {
    position: absolute;
    height: 200px;
    left: 150px;
    top: 0;
}
.lk {
    margin-top: 10;
    font-size: 40px;
    margin-left: 10px;
    color: rgba(240, 248, 255, 0.669);
    position: absolute;
    bottom: 42px;
}

.gm{
    margin-top: 10;
    font-size: 40px;
    margin-left: 10px;
    color: rgb(240, 248, 255);
    position: absolute;
    bottom: 35px;
}
.vap{
    height: 150px;
    position: absolute;
    bottom: 2px;
    right: 0.5px;
}

.spe{
    height: 250px;
    position: absolute;
    bottom: -15px;
    left: 80px;
    transform: rotate(30deg);
}

#ht {
    font-size: small;
    margin-left: 10px;
    color: white;
}
#wit {
    background-color: rgb(255, 0, 0);
    border: none;
    border-radius: 10%;
    color: rgb(255, 255, 255);
    position: absolute;
    bottom: 50px;
    margin-left: 10px;
}
#nevy {
    background-color: rgb(255, 255, 255);
    border: none;
    border-radius: 10%;
    color: rgb(16, 0, 97);
    position: absolute;
    bottom: 50px;
    margin-left: 10px;
}





.start {
    background-color: transparent;
    display: flex;
    height: 70px;
    justify-content: space-around;
    margin-top: 20px;
}

#ico {
    font-size: 20px;
    color: goldenrod;
}

.fine {
    display: flex;
    height: 200px;
    background-color: red;
    margin-top: 130px;
    border-radius: 5%;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    position: relative;
    justify-content: space-between;
}

.son{
    margin: 20px 40px;
    font-size: 20px;
    color: white;
}

.son h2 {
   font-size: 50px;
   position: absolute;
   bottom: 70PX;
   letter-spacing: 5px;
}

.sk{
    margin: -25px 3px;
}

.bd {
    height: 250px;
    position: absolute;
    bottom: 40px;
    left: 100px;
}

.easy{ 
    margin: 20px 40px;
    color: white;

}

.easy h3 {
    font-size: 20px;
}

.low {
    margin: -20px 2px;
}


.mk {
    background-color: white;
    color: red;
    border: none;
    width: 50px;
    border-radius: 10%;
}


.top {
    background-color: transparent;
    color: black;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-top: 70px;
}

.top p {
    margin: -10px 0;
}

.net {
    background-color: transparent;
    gap: 15px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
    gap: 15px;

}

.stoke {
    width: 200px;
    height: 300px;
}

.stoke:nth-child(1){
    background-color: transparent;
}

.stoke:nth-child(2){
    background-color: transparent;
}
.stoke:nth-child(3){
    background-color: transparent;
}
.stoke:nth-child(4){
    background-color: transparent;
}

.jik{
    width: 200px;
    height: 300px;
}

.jik:nth-child(1){
    background-color: transparent;
}

.jik:nth-child(2){
    background-color: transparent;
}
.jik:nth-child(3){
    background-color: transparent;
}
.jik:nth-child(4){
    background-color: transparent;
}

.lg{
    background-color: rgba(128, 128, 128, 0.355);
    width: 100%;
    height: 200px;
    position: relative;
}
.fv {
    height: 150px;
    position: absolute;
    top: 20px;
    left: 20px;
}
.stoke p {
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.stoke h4 {
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.vf {
    height: 180px;
    position: absolute;
    top: 10px;
    left: 20px;
}

.vv {
    height: 100px;
    position: absolute;
    top: 40px;
    left: 20px;
}

.jik p {
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.jik h4 {
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.ff {
    height: 230px;
    position: absolute;
    top: 40px;
    left: 40px;
}

.hours {
    display: flex;
    height: 200px;
    background-color: rgb(1, 1, 74);
    margin-top: 130px;
    border-radius: 5%;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 10px;
    position: relative;
    justify-content: space-between;
}

.km {
    background-color: white;
    color: blue;
    border: none;
    width: 50px;
    border-radius: 10%;
}

.news {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 350px;
    background-color: transparent;
    margin-top: 50px;
}

.info {
    background-color: transparent;
    height: 300px;
    width: 300px;
    margin: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.io {
    width: 100%;
    height: 200px;
    border-radius: 5%;
}

.zs {
    width: 100%;
    height: 200px;
    border-radius: 5%;
}

.let {
    background-color: rgba(127, 121, 121, 0.343);
    display: flex;
    height: 70px;
    justify-content: space-around;
    margin-top: 15px;
}

.ts {
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-top: 5px;
    color: rgb(62, 62, 62);
    text-shadow: white 5px 5px 5px;
}

footer {
    background-color: rgba(0, 0, 0, 0.684);
    height: 300px;
    width: 100%;
    margin-top: 50px;
    text-align: center;
}

.block {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: aliceblue;
    text-align: center;
    height: 100px;
}
.stick {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    gap: 10px;
    margin-left: 20px;
}

.mv {
    border: solid white;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

#mv {
    font-size: 15px;
}

.secu {
    padding-right: 60px;
    padding-top: 15px;
}

.vm{
    margin-top: 15px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}
#vm {
    font-size: 25px;
}

.yjl {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 15px;
    color: aliceblue;
    text-align: center;
    height: 100px;
}

#ktl {
    font-size: 16px;
}

.ktl p {
    margin-top: -7px;
}

.nb{
    color: aliceblue;
    font-size: 16px;
    margin-top: 20px;
}

.grid {
    width: 100%;
    height: 400px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2);
    grid-template-areas:
     'a b c c'
     ' d d e f'
     ;
    gap: 7px;
    padding: 10px;
}

.dis {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    position: relative;
}

.dis:nth-child(1){
    background-image: linear-gradient(to top,skyblue,rgba(3, 3, 3, 0.451));
    grid-area: a;
}

.dis:nth-child(2){
    background-image: linear-gradient(to left, yellow, rgba(255, 183, 0, 0.419));
    grid-area: b;
}
.dis:nth-child(3){
    background-image: linear-gradient(to bottom, red, rgb(108, 106, 106));
    grid-area: c;
    width: 100%;
}
.dis:nth-child(4){
    background-image: linear-gradient(to right, gray, rgb(227, 210, 210));
    grid-area: d;
    width: 100%;
}
.dis:nth-child(5){
    background-image: linear-gradient(to bottom, rgba(1, 1, 49, 0.915), rgba(255, 255, 255, 0.513));
    grid-area: e;
}
.dis:nth-child(6){
    background-image: linear-gradient(to bottom, black, gray);
    grid-area: f;
}
/* .dis:nth-child(7){
    background-color: rgb(247, 193, 0);
}
.dis:nth-child(8){
    background-color: rgb(255, 0, 195);
} */